<template>
  <div class="table-box">
    <ProTable ref="proRef" :columns="columns" :requestApi="getRoutes" :pagination="false">
      <template #tableHeader>
        <el-button type="primary" @click="opera(undefined)" v-auth="'添加'">添加路由</el-button>
        <el-button type="danger" v-auth="'删除'">删除路由</el-button>
        <el-button @click="go" v-if="false">参数列表</el-button>
      </template>
      <template #opera="{ row }">
        <el-button type="primary" link :icon="EditPen" @click="opera(row)" v-auth="'编辑'">编辑</el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteShop([row.id])" v-auth="'删除'">删除</el-button>
      </template>
    </ProTable>
    <route-drawer ref="routeRef"></route-drawer>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { onBeforeMount, ref } from "vue";
import { useRouter } from "vue-router";
import { Delete, EditPen } from "@element-plus/icons-vue";
import { getRoutes, createRoute, editRoute, deleteRoutes } from "@/api/modules/shop";
import routeDrawer from "../components/routeDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";

const deleteShop = async (ids: any) => {
  try {
    await useHandleData(deleteRoutes, { ids }, "删除所选内容");
    await proRef.value?.getTableList();
  } catch (error) {}
};

const router = useRouter();

const columns: ColumnProps[] = [
  { prop: "sort", label: "排序值" },
  { prop: "name", label: "路由名称" },
  { prop: "path", label: "网站路径" },
  { prop: "app_path", label: "小程序路径" },
  { prop: "routeName", label: "路由标识" },
  { prop: "params_description", label: "参数描述" },
  { prop: "example", label: "例子" },
  { prop: "opera", label: "操作" }
];

const go = () => {
  router.push({ name: "RouteParams" });
};

const proRef = ref<InstanceType<typeof ProTable> | null>();

const routeRef = ref<InstanceType<typeof routeDrawer> | null>();

const opera = (row: any) => {
  const params: any = {
    row: row ? row : { name: "", routeName: "", match: "", sort: 1, params: [] },
    api: row ? editRoute : createRoute,
    getTable: proRef.value?.getTableList,
    list: list.value
  };
  routeRef.value?.acceptParams(params);
};

const list = ref([]);

onBeforeMount(() => {});
</script>

<style></style>
